<template>
  <el-dialog v-model="isOpen" title="定时任务编辑器" width="1000" :before-close="handleClose">
    <el-form :model="data" label-width="auto" style="max-width: 600px">
      <el-form-item label="jobName">
        <el-input v-model="data.jobName" />
      </el-form-item>
      <el-form-item label="jobClass">
        <el-input v-model="data.jobClass" />
      </el-form-item>
      <el-form-item label="cronExpression">
        <el-input v-model="data.cronExpression" />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="data.startTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          placeholder="Select date and time"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="data.endTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          placeholder="Select date and time"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('editOk')">取消</el-button>
        <el-button type="primary" @click="save"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import TaskScheduler from '@/api/other/TaskScheduler'
import { ElMessage } from 'element-plus'
import { defineModel, defineProps } from 'vue'
const isOpen = defineModel('isOpen')
const data = defineModel('data', {
  default: {
    jobName: '',
    jobClass: '',
    cronExpression: '',
    startTime: '',
    endTime: ''
  }
})
const props = defineProps(['description'])
const emit = defineEmits(['editOk'])
// 叉掉弹出框
function handleClose(done) {
  done()
}
// 添加定时任务
function save() {
  new TaskScheduler()
    .save(data.value)
    .then((res) => {
      if (res.code === 200) {
        ElMessage({ message: '添加成功!', type: 'success' })
        emit('editOk')
      }
    })
    .catch((err) => {
      console.err(err)
    })
}
</script>
<style scoped></style>
